<script setup>
import { ref, onMounted, onBeforeMount } from "vue";
import {
  initMap,
  moveTarget,
  getDistance,
  dis,
  getLocation,
} from "@/utils/mapHandle.js";
import PageTop from "@/components/GengNan/pageTop.vue";
import { routeQuery } from "@/hook/routerHandle.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { localhostLatitude, localhostLongitude, address } = routeQuery();
console.log("item:", localhostLatitude, localhostLongitude);
const target = ref(null);
const getTarget = async () => {
  await getLocation();
  target.value = getDistance([localhostLatitude, localhostLongitude]);
  console.log("target11:", target.value);
};
// onBeforeMount(() => {
//   initMap();
//   moveTarget([localhostLatitude, localhostLongitude]);
//   getTarget();
// });
onMounted(() => {
  initMap();
  moveTarget([localhostLatitude, localhostLongitude]);
  getTarget();
  //   getDistance([22.3739904, 114.1085064]); //获取距离
  //   getDistance([localhostLatitude, localhostLongitude]);
});
</script>
<template>
  <header class="header">
    <PageTop class="TopBar"></PageTop>
    <h4 @click="getDistance([22.3739904, 117.108064])">{{ address }}</h4>
    <!-- <h4 @click="getDistance([localhostLatitude, localhostLongitude])">{{ address }}</h4> -->
  </header>
  <div id="container"></div>
</template>
<style lang="scss" scoped>
.header {
  width: 100vw;
  height: 10vh;
  // background-color: rgb(138, 138, 138);

  h4 {
    text-align: center;
    font-size: 16rem;
    font-weight: 600;
  }
}

:deep(.blue-icon) {
  font-size: 15rem;
  color: red;
}

#container {
  // margin-top: 6vh;
  width: 100vw;
  height: 90vh;
  border-top: 1rem solid #e5e5e5;
  background-color: powderblue;
}
</style>
